<!DOCTYPE html>
<html>
	<head>
		<title>Yin网络聊天室</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="./css/webchat.css">
		<script src="./js/base64.js"></script>
		<script>
		var username = "匿名";
		var id;
		var wsocket;
		function init(){
			var host = "ws://127.0.0.1:8000/";
			try{
				wsocket = new WebSocket(host);
				wsocket.onopen    = function(msg){ ; };
				wsocket.onmessage = function(msg){ log(msg.data); };
				wsocket.onclose   = function(msg){ log("服务器关闭!"); };
			}
			catch(ex){ log(ex); }
			$("#msg").focus();
		}

		function send(){
			var msg = $("#msg").val();
			if(!msg){ alert("Message can not be empty"); return; }
			$("#msg").val("");
			$("#msg").focus();
			var send_msg = username+":"+msg+':'+'nomal';
			var msg_encode = Base64.encode(send_msg);
			try{ 
				wsocket.send(msg_encode); 
			} 
			catch(ex){ 
				log(ex);
			}
		}

		window.onbeforeunload=function(){
			var data = Base64.encode('quit');
			try{ 
				wsocket.send(data); 
				wsocket.close();
				wsocket=null;
			}
			catch(ex){ 
				log(ex);
			}
		};

		function log(msg){
			msg = Base64.decode(msg);
			var tmp = msg.split(' ');
			if(tmp[0]=='Welcome'){
				tmp[0] = '欢迎！'+username;
				var m = tmp.join(' ');
				$("#log")[0].innerHTML+="<div class='mid'><div class='middlemsg'>"+m+"</div></div><br>";
				var tmp2 = msg.split(':');
				id = tmp2[tmp2.length-1];
			}else{
				var tmp1 = msg.split(':');
				var m = '';
				for (var i = 3; i < tmp1.length-1; i++) {
					m += tmp1[i];
					if (i < tmp1.length-2) {
						m += ':';
					}
				}
				if (tmp1[2] == username && tmp1[0] == id && tmp1.length>4) { //自己的内容
					$("#log")[0].innerHTML+="<div class='m'><div class='selfname'>"+tmp1[2]+"("+tmp1[0]+")"+"</div><div class='selfsend'>"+
					"<span class='massage'>"+m+"</span><div class='selfarrow'></div></div></div><br>";
				}else{
					if (tmp1.length<2||tmp1[0]=='系统消息') { //系统消息
						$("#log")[0].innerHTML+="<div class='mid'><div class='middlemsg'>"+msg+"</div></div><br>";
					}else if (tmp1.length==2 || tmp1.length==3) { //不处理的消息
						$("#log")[0].innerHTML+="";
					}else if (tmp1.length>4){ //别人的
						$("#log")[0].innerHTML+="<div><div class='name'>"+tmp1[2]+"("+tmp1[0]+")"+"</div><div class='send'>"+
						"<span class='massage'>"+m+"</span><div class='arrow'></div></div></div>";
					}
				}
			}
		}
		function onkey(event){ if(event.keyCode==13){ send(); } }
		</script>
	</head>
	<body>
		<div class="first">
			<div class="disc">
				<div class="title">请起一个名字</div>
				<div class="inputname">
					<input type="text" name="nickname" id="nickname">
					<button class="done" onclick="nickname()">完成</button>
				</div>
			</div>
		</div>
		<div class="second">
			<div class="title2">Yin的网络聊天室</div>
			<div id="log" class="messagebox">
			</div>
			<div class="inputmessage">
				<input id="msg" type="textbox" onkeypress="onkey(event)"/>
				<button onclick="send()">发送</button>
			</div>
			<button onclick="turntoplay()" class="newplay">Play</button>
		</div>
	</body>
	<script src='js/jquery.js'></script>                
	<script src='js/jquery-starfield.js'></script>
	<script type="text/javascript">
		var height = $(document).height();
		$('.first').height(height);
		$('.second').height(height);
		$('.messagebox').height(height-140);
		function nickname(){
			if($('#nickname').val()!="")
				username = $('#nickname').val();
			$('.first').addClass("away");
			init();
		}
		function turntoplay(){
			window.location.href="Alpha.html?username="+username;
		}
	</script>
</html>